/*
 * 缴纳保证金
 * @Author: along
 * @Date: 2021-04-10
 * @Last Modified by: alog
 * @Last Modified time: --
 */

<template>
    <section class="paymentBood">
        <div class="container">
            <!-- head -->
            <div class="container-head">
                缴纳保证金
            </div>

            <!-- payment -->
            <div v-if="!isPay">
                <!-- payment -->
                <div class="container-payment">
                    <p
                        class="container-payment-money"
                        :style="{fontWeight: '400', fontSize: '16px'}"
                    >
                        保证金金额: ¥{{ dep.deposit_money }}
                    </p>
                    <div class="server_plament">
                        <p class="server_plament_title">
                            合计需支付：
                        </p>
                        <p class="server_price">
                            ¥{{ service_price }}
                        </p>
                    </div>
                    <p class="container-payment-title">
                        请确认合同
                    </p>
                    <div class="wrap">
                        <el-checkbox v-model="checked" />
                        <p class="desc">
                            我已阅读并同意
                        </p>
                        <p
                            class="hetong"
                            @click="fnCheckPdf()"
                        >
                            《合同》
                        </p>
                        <p class="desc">
                            相关内容
                        </p>
                    </div>
                    <p
                        class="container-payment-money"
                        style="margin-bottom：12px"
                    >
                        选择支付方式
                    </p>
                    <div class="list">
                        <a
                            v-for="(item,index) in payment"
                            :key="index"
                            class="list-content"
                            @click="fnPayment(index)"
                            href="javascript:void(0)"
                        >
                            <i
                                class="iconfont list-content-logo"
                                :class="item.icon"
                                :style="{
                                    color: index == 0 ? '' : (index == 1 ? 'rgba(0, 200, 0, 1)' : '#F5A623'),background: index == 0 ? '#1983F3' : (index == 1 ? '' : ''), margin: '0 32px 14px 32px'
                                }"
                            />
                            <p class="list-content-text">
                                {{ item.title }}
                            </p>
                        </a>
                    </div>
                </div>

                <!-- foot -->
                <div class="container-foot">
                    <div class="wrap">
                        <p class="line" />
                        <div class="wrap-list">
                            <p class="wrap-list-title">
                                为什么收保证金
                            </p>
                            <p class="wrap-list-text">
                                由于学生是被国家保护群体，也是弱势群体；所以，校园市场应该比任何其他市场都要注重安全和风险防控，必须保证大学生的安全并保障大学生的合理权益。
                            </p>
                        </div>
                    </div>
                    <div
                        class="wrap"
                    >
                        <p class="line" />
                        <div class="wrap-list">
                            <p class="wrap-list-title">
                                保证金何时退还
                            </p>
                            <p class="wrap-list-text">
                                您可自由选择申请退还保证金，我们会严格按照《电子商务法》在结清往来账务,并且处理完所有用户订单产生的退换货问题后将保证金如数退还给您。可详见合同条款
                                <span
                                    class="wrap-list-text-look"
                                    @click="fnCheckPdf()"
                                >
                                    查看合同
                                </span>
                            </p>
                        </div>
                    </div>
                    <div
                        class="wrap"
                    >
                        <p class="line" />
                        <div class="wrap-list">
                            <p class="wrap-list-title">
                                保证金何时退还
                            </p>
                            <p class="wrap-list-text">
                                可详见合同5.3条款，
                                <span
                                    class="wrap-list-text-look"
                                    @click="fnCheckPdf()"
                                >
                                    查看合同
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="isPay">
                <div class="container-confirm">
                    <img
                        src="@/assets/image/payment-confirm.png"
                        alt="加载失败"
                        class="container-confirm-logo"
                    >
                    <p class="container-confirm-title">
                        {{ PAYMENT_TYPE === 1 ? '网银汇款确认中' : '汇款确认中' }}
                    </p>
                    <p class="container-confirm-desc">
                        您好，我们的工作人员正在确认汇款，请您先行点击以下的按钮，完成整个商城入驻的最后一步：企业信息认证，认证完成后，整个入驻即全部完成，你将享有掌上大学校园商城的全部权益
                    </p>
                </div>
                <el-button
                    type="primary"
                    size="small"
                    style="width:160px;height:36px;margin-left:50%;transform: translateX(-80px);"
                    @click="()=>{
                        this.$router.push({
                            name: 'certification'
                        });
                    }"
                >
                    企业信息认证
                </el-button>
            </div>
        </div>

        <!-- 微信支付弹窗 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="384px"
            :show-close="false"
        >
            <div class="dialog">
                <p class="dialog-money">
                    ¥{{ dep.deposit_money }}
                </p>
                <p class="dialog-text">
                    支付金额
                </p>
                <p class="dialog-desc">
                    请用微信扫一扫二维码进行支付
                </p>
                <img
                    :src="qrcode_url"
                    alt="加载失败"
                    class="dialog-image"
                >
            </div>
        </el-dialog>

        <!-- 支付成功 -->
        <el-dialog
            :visible.sync="dialogVisibleSucess"
            width="312px"
            :show-close="false"
        >
            <div class="dialogSuccess">
                <img
                    src="@/assets/image/withdrawal-success.png"
                    alt="加载失败"
                    class="dialogSuccess-logo"
                >
                <p class="dialogSuccess-title">
                    支付成功
                </p>
            </div>
        </el-dialog>

        <!-- 微信/支付宝收款弹窗 -->
        <el-dialog
            :visible.sync="dialogVisibleCode"
            width="456px"
            :show-close="false"
            class="dialogVisibleZd"
        >
            <div class="dialogZdCode">
                <p class="_title">
                    {{ payType == 0 ? '请用支付宝扫码进行支付' : '请用微信扫码进行支付' }}
                </p>
                <p
                    class="dialogZdCode_content"
                    :style="{marginBottom: '16px'}"
                >
                    收款金额：{{ this.service_price }}元
                </p>
                <p
                    class="dialogZdCode_content"
                    :style="{marginBottom: '25px'}"
                >
                    汇款备注：入驻校园商城保证金
                </p>
                <div class="_code">
                    <img
                        src="http://cdn.zsdx.cn/student-app/images/payment_code_new.png"
                        :style="{width: '250px', height: '250px'}"
                    >
                </div>
                <div class="dialogZdCode-foot">
                    <el-button
                        size="small"
                        style="width:120px;height:36px"
                        type="default"
                        @click="dialogVisibleCode = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="small"
                        style="width:120px;height:36px;margin-left:48px"
                        type="primary"
                        @click="()=>{
                            dialogVisibleCode = false;
                            dialogVisibleZdConfirmCode = true;
                        }"
                    >
                        已支付
                    </el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 微信支付宝收款确认 -->
        <el-dialog
            :visible.sync="dialogVisibleZdConfirmCode"
            width="360px"
        >
            <div class="ZdConfirm">
                <p class="ZdConfirm-title">
                    是否确认已汇款？
                </p>
                <p class="ZdConfirm-content">
                    一旦确认，则立刻会通知工作人员进行汇款验证，并为您充值保证金金额
                </p>
                <div class="ZdConfirm-foot">
                    <el-button
                        size="small"
                        style="width:120px;height:36px"
                        type="default"
                        @click="()=>{
                            dialogVisibleZdConfirmCode = false;
                            dialogVisibleCode = true;
                        }"
                    >
                        点错了
                    </el-button>
                    <el-button
                        size="small"
                        style="width:120px;height:36px;margin-left:48px"
                        type="primary"
                        @click="fnBankPayCode()"
                    >
                        已支付
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import { mapState } from 'vuex';
import getZdAccountInfo from '@/assets/mixin/check-info';

const Extension = {
    service_price: '',//合计支付
    service_money: 0,
};

export default {
    mixins: [getZdAccountInfo],
    components: { },
    data() {
        return {
            SELF: this,
            ...Extension,
            isPay: false,//是否使用网银充值
            dialogVisibleZdConfirm: false,
            dialogVisibleZd: false,
            dialogVisibleSucess: false,
            dialogVisible: false,
            qrcode_url: '',//微信支付二维码
            checked: false,//是否选择合同
            payment: [{
                title: '支付宝',
                icon: 'icon-zhifubao1'
            },{
                title: '微信',
                icon: 'icon-wechat'
            }],
            dep: {
                deposit_money: 0,
                contract_url: ''
            },
            time: 'weixin',
            //微信支付宝收款相关参数
            dialogVisibleCode: false,
            dialogVisibleZdConfirmCode: false,
            PAYMENT_TYPE: 1,
            payType: ''
        };
    },
    computed: {
        ...mapState({
        }),
    },
    watch: {
        // 切换路由时自动滚动至顶部
        $route(val, old) {
            if (val.name !== old.name) {
                this.$scrollTo(this.$refs.top, 10, { container: "._body", duration: 10, easing: "ease-in-out" });
            }
        },
        dialogVisible (val) {
            if(!val) {
                clearTimeout(this.time);
            }
        }
    },
    mounted() {
        this.init();
        this.getForPay();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.getZdAccountInfo(resp => {
                if(resp.deposit_status === 1) {
                // 充值完成进入首页
                    this.$router.push({
                        name: 'manageLead'
                    });
                } else if(process.client){
                    this.$store.commit('theme/SET_BREAD', [{title: '缴纳保证金'}]);
                }
            });
        },

        /**
         *  @description 获取保证金
         */
        getForPay () {
            this.$post('/Deposit/getForPay',{}, resp => {
                if(resp.code == 1) {
                    this.dep = {
                        ...resp.data
                    };
                    this.service_price = resp.data.pay_money;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 支付
         * @param   {Number}    type    //0:支付宝 1:微信
         */
        fnPayment (type) {
            if(!this.checked) {
                this.$notify({
                    title: '提示',
                    message: '请先查看并确认合同',
                    type: 'warning'
                });
                return;
            }

            this.payType = type;
            this.dialogVisibleCode = !this.dialogVisibleCode;
        },

        /**
         * @description 微信支付宝确认支付
         */
        fnBankPayCode () {
            this.dialogVisibleZdConfirmCode = this.dialogVisibleCode = false;
            this.$post('/Deposit/setOfflinePay',{
                type: this.payType == 0 ? 2 : this.payType == 1 ? 3 : ''
            }, resp => {
                if(resp.code == 1) {
                    this.PAYMENT_TYPE = 2;
                    this.isPay = !this.isPay;

                    setTimeout(() => {
                        this.checkData();
                    },500);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description  保证金查询
         */
        checkData () {
            this.$post('/Deposit/getForPay', {}, resp => {
                if (resp.code == 1) {
                    this.$store.commit('common/SET_DEPOSIT_MONEY', resp.data.deposit_money);
                    this.init();
                }
            });
        },

        /**
         * @description 查看合同
         */
        fnCheckPdf () {
            if(this.dep.contract_url) {
                window.open(this.dep.contract_url);
            } else {
                this.$notify({
                    title: '提示',
                    message: '合同内容为空',
                    type: 'warning'
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
  @media screen and (max-width: 1240px) {
    ._body {
    //   padding-top: 40px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
  @media screen and (min-width: 1241px) {
    ._body {
      overflow-y: hidden;
      overflow-x: hidden;
    }
  }
  .transform {
    transform: translate3d(0, 0, 0);
  }
  ._body {
    width: 1200px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 30px;
  }
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0px;
    background-color: #ffffff;
    padding-bottom: 30px;
    padding: 0 0px 30px 0px;
    box-sizing: border-box;
    &::-webkit-scrollbar {
        width: 4px;
    }
    &-head {
        width: 100%;
        padding: 24px 0px;
        box-sizing: border-box;
        color: #3F454B;
        font-size: 24px;
        font-weight: 500;
        border-bottom: 1px #F0F2F7 solid;
        padding-left: 32px;
    }
    &-payment {
        background:rgba(251,251,251,1);
        border-radius:2px;
        border:1px solid rgba(238,238,238,1);
        padding: 32px 24px;
        display: flex;
        flex-direction: column;
        margin: 24px 32px 0 32px;
        box-sizing: border-box;
        .schoolWrap {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            margin-bottom: 24px;
            &-title {
                display: flex;
                align-items: center;
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
            }
            .schoolWrap-side {
                height: 32px;
                margin: 16px 0 24px 48px;
                display: flex;
                align-items: center;
                .server_title {
                    color: rgba(63, 69, 75, 1);
                    font-size: 14px;
                    margin-right: 8px;
                    white-space: nowrap;
                }
                .server_desc {
                    color: rgba(63, 69, 75, 1);
                    font-size: 14px;
                    margin: 0 12px;
                    white-space: nowrap;
                }
                .server_tips {
                    color: rgba(153, 153, 153, 1);
                    font-size: 12px;
                    white-space: nowrap;
                }
            }
        }
        .server_plament {
            height: 16px;
            display: flex;
            align-items: center;
            margin-bottom: 32px;
            .server_plament_title {
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                white-space: nowrap;
            }
            .server_price {
                color: rgba(238, 78, 89, 1);
                font-size: 20px;
                font-weight: 500;
            }
        }
        &-money {
            color: #3F454B;
            font-size: 20px;
            font-weight: 500;
            height: 20px;
            margin-bottom: 24px;
        }
        &-title {
            color: #3F454B;
            font-size: 20px;
            font-weight: 500;
            height: 14px;
            margin-bottom: 22px;
        }
        .wrap {
            height: 14px;
            display: flex;
            align-items: center;
            margin-bottom: 33px;
            .desc {
                color: #3F454B;
                font-size: 14px;
            }
            .hetong {
                color: #20A0FF;
                font-size: 14px;
                cursor: pointer;
                padding: 0 2px;
            }
        }
        .list {
            width: 100%;
            height: 164px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 32px;
                width: calc((100% - 64px)/2);
                height: 164px;
                background:rgba(255,255,255,1);
                border:1px solid rgba(220,223,230,1);
                cursor: pointer;
                &:hover {
                    border:1px solid rgba(25,131,243,1);
                }
                ._flex {
                    display: flex;
                    align-items: center;
                    margin-bottom: 14px;
                }
                &-logo {
                    font-size: 72px;
                    width: 72px;
                    height: 72px;
                    border-radius: 50%;
                    color: #ffffff;
                }
                &-logo2 {
                    width: 72px;
                    height: 72px;
                    border-radius: 50%;
                    margin-left: 32px;
                }
                &-text {
                    color: #3F454B;
                    font-size: 14px;
                }
            }
        }
    }
    &-foot {
        background:rgba(251,251,251,1);
        border-radius:2px;
        border:1px solid rgba(238,238,238,1);
        padding: 56px;
        display: flex;
        margin: 32px 32px 0 32px;
        box-sizing: border-box;
        justify-content: space-between;
        .wrap {
            display: flex;
            .line {
                width:8px;
                height:16px;
                background:rgba(240,161,46,1);
                margin-right: 8px;
            }
            &-list {
                display: flex;
                flex-direction: column;
                &-title {
                    color: #333333;
                    font-size: 16px;
                    height: 16px;
                    white-space: nowrap;
                    margin-bottom: 12px;
                    font-weight: 500;
                }
                &-text {
                    width: 270px;
                    font-size: 14px;
                    line-height: 26px;
                    color: #666666;
                    &-look {
                        color: #20A0FF;
                        font-size: 14px;
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    &-confirm {
        background:rgba(251,251,251,1);
        border:1px solid rgba(238,238,238,1);
        margin: 24px 32px 32px 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 100px 0;
        &-logo {
           width: 72px;
           height: 72px;
           border-radius: 50%;
           margin-bottom: 32px;
        }
        &-title {
            color: #000000;
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 18px;
        }
        &-desc {
            color: #333333;
            font-size: 14px;
            line-height: 24px;
            width: 440px;
            text-align: center;
        }
    }
}
.dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    &-money {
        color: #FF9800;
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 5px;
    }
    &-text {
        color: #3F454B;
        font-size: 16px;
    }
    &-desc {
      color: #1D2023;
      font-size: 16px;
      margin-top: 34px;
      margin-bottom: 20px;
    }
    &-image {
        width: 300px;
        height: 300px;
    }
}
.dialogSuccess {
    display: flex;
    flex-direction: column;
    align-items: center;
    &-logo {
        width: 72px;
        height: 72px;
    }
    &-title {
       color: #000000;
       font-size: 20px;
       font-weight: 500;
       margin-top:  22px;
    }
}
.dialogZdCode {
    display: flex;
    flex-direction: column;
    align-items: center;
    ._title {
        width: 100%;
        text-align: center;
        color: rgba(29, 32, 35, 1);
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 24px;
    }
    .dialogZdCode_content {
        width: 100%;
        text-align: center;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
    }
    ._code {
        width: 298px;
        height: 298px;
        text-align: center;
        border: 1px rgba(238, 238, 238, 1) solid;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 24px;
        margin-bottom: 24px;
    }
    &-title {
        color: #333333;
        font-size: 16px;
        margin-bottom: 24px;
        font-weight: 500;
    }
    &-desc {
        color: #333333;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 24px;
    }
    &-text {
        height: 14px;
        display: flex;
        align-items: center;
        color: #555555;
        font-size: 14px;
        margin-bottom: 24px;
        white-space: nowrap;
        .dialogZdCode-content {
            color: #333333;
            font-size: 14px;
            margin-left: 8px;
        }
    }
    &-foot {
        margin-top: 8px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.dialogZd {
    display: flex;
    flex-direction: column;
    &-title {
        color: #333333;
        font-size: 16px;
        margin-bottom: 24px;
        font-weight: 500;
    }
    &-desc {
        color: #333333;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 24px;
    }
    &-text {
        height: 14px;
        display: flex;
        align-items: center;
        color: #555555;
        font-size: 14px;
        margin-bottom: 24px;
        white-space: nowrap;
        .dialogZd-content {
            color: #333333;
            font-size: 14px;
            margin-left: 8px;
        }
    }
    &-foot {
        margin-top: 8px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.dialogZd_content {
    height: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: #555555;
    font-size: 14px;
    margin-bottom: 24px;
    white-space: nowrap;
}
.ZdConfirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    &-title {
        color: #333333;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
    }
    &-content {
       color: #333333;
       font-size: 14px;
       line-height: 22px;
       width: 100%;
       text-align: center;
       margin-bottom: 24px;
       width: 276px;
    }
    &-foot {
        margin-top: 8px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
<style lang="less">
.paymentBood {
    .el-checkbox__inner {
        border: 1px rgba(223,225,231) solid;
        border-radius: 3px;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }
    .el-dialog__header {
        padding: 0px;
    }
    .el-dialog__body {
        padding: 42px 0 52px 0;
    }
    .dialogVisibleZd .el-dialog__body{
        padding: 48px 60px;
    }
}
</style>
